<template>
  <component
    :is="options && options.component"
    :param="options"
    ref="focusComponent"
  ></component>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'anovFocus',
  components: {},
  computed: {
    ...mapState('focus', ['focusedId']),
    options() {
      let content = this.focusedId
      if (this.focusedId.indexOf(`${this.$route.name}`) != -1) {
        content = this.focusedId.replace(`${this.$route.name}.`, '')
      } else {
        let contentRouteName = content.split('.')[0]
        let name = app.pageServer.allPages.find(
          item => item.name == contentRouteName
        )
        if (name) {
          return false
        }
      }

      let opt = {
        videoSoundtrack: false, //默认是否视频原声
        showMethod: 'show', //默认显示方法show
        hideMethod: 'hide', //默认隐藏方法为hide
        component: 'defaultFocus',
        content
      }
      let options = app.focusServer.focusOptions.find(
        opt => opt.id == this.focusedId
      )
      Object.assign(opt, options)
      return opt
    }
  },
  props: {},
  data() {
    return {}
  },
  mounted() {
    app.focusServer.addEventListener('show', this.show)
    app.focusServer.addEventListener('hide', this.hide)
    app.focusServer.addEventListener('hideComplete', this.hideComplete)
  },
  methods: {
    show() {
      if (!this.options) {
        this.hideComplete()
        return
      }
      this.$nextTick(() => {
        let method = this.options.showMethod || 'show'
        this.$refs.focusComponent[method]()
      })
    },
    hide() {
      if (!this.options) return
      this.$nextTick(() => {
        let method = this.options.hideMethod || 'hide'
        this.$refs.focusComponent[method]()
      })
    },
    hideComplete() {
      app.focusServer.focusedId = ''
    }
  },
  beforeDestroy() {
    app.focusServer.removeEventListener('show', this.show)
    app.focusServer.removeEventListener('hide', this.hide)
    app.focusServer.removeEventListener('hideComplete', this.hideComplete)
  }
}
</script>
<style lang="scss" scoped></style>
